import { FC, useEffect } from 'react';

const Theme: FC = () => {
  useEffect(() => {
    const root = document.documentElement;
    root.className = 'light';
  }, []);

  const changeTheme = () => {
    const root = document.documentElement;
    // 这里跟上面改变单个变量的方式不同，需要直接改变root的className来改变整体主题
    root.className = 'dark';
  };

  return (
    <>
      <div>123123</div>
      <button onClick={changeTheme}>change theme</button>
    </>
  );
};

export default Theme;
